<template>
  <view class="home defaultMain">
    <!-- swiper -->
    <my-swiper></my-swiper>
    <!-- menu -->
    <home-menu></home-menu>
    <view style="padding: 0 20rpx;">
      <news-list :newsList="list">
        <view class="newsTitle">
          <view class="newsTitleLeft">
            通知
          </view>
          <view class="newsTitleRight" @click="routeNewsList">
            更多
            <u-icon name="arrow-right"></u-icon>
          </view>
        </view>
      </news-list>
    </view>
  </view>
</template>

<script>
import mySwiper from "./myswiper.vue";
import homeMenu from "./homeMenu.vue";
import newsList from "../news/newsList.vue";
import {newsListData} from "../../../common/api/news";
export default {
  name: "Home",
  components: {
    mySwiper,
    homeMenu,
    newsList,
  },
  data() {
    return {
      list: []
    };
  },
  onLoad() {},
  onShow() {
    const Data = {
      page: 1,
      limit: 3
    }
    newsListData(Data).then(res => {
      // console.log(res)
      this.list = [...res.list]
    })
  },
  methods: {
    // 跳转新闻列表
    routeNewsList() {
      this.$Router.push({
        name: "homeMoreNews"
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  background-color: #eeeef3;
  padding: 10rpx 0 30rpx 0;
}
.newsTitle {
  display: flex;
  width: 100%;
  padding: 16rpx 30rpx;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1rpx solid #e9f2fe;
}

.newsTitleLeft {
  font-size: 32rpx;
  font-weight: 700;
  color: #323233;
}

.newsTitleRight {
  width: 112rpx;
  height: 44rpx;
  color: #2979ff;
  border: 1rpx solid #2979ff;
  border-radius: 44rpx;
  text-align: center;
  font-size: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
